import React from 'react';
import ImageLazy from './commons/ImageLazy';
import NavLink from './commons/NavLink';
import {user_logined,get_order_classify} from '../actions';
import { connect } from 'react-redux';
import {hashHistory } from 'react-router'

const arr_right = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/arr_right.png');
const user_nav1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/user_nav1.png');
const user_nav2 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/user_nav2.png');
const user_nav3 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/user_nav3.png');
const user_nav4 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/user_nav4.png');
const user_default = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/user_default.gif');

let mydefault = React.createClass({
  componentDidMount:function(){
    const {dispatch} = this.props;
    dispatch(get_order_classify(this.props.userId))
  },
  confim_out:function(){
    let a= confirm('您确定要退出吗？');
    const {dispatch} = this.props;
    if(a){
      dispatch(user_logined(false,0))
      // hashHistory.push('/userView/user');
    }
  },
  render:function(){
    return(
      <div id="user">
        <header className="border_b1 border_t1">
          <span className="circle">
            <em style={{backgroundImage:"url(" + user_default + ")"}}></em>
          </span>
          <div className="userName">{this.props.userTel}</div>
        </header>
        <div className="content">
          <div classNmae="item_wrapper">
            <div classNmae="item">
              <NavLink to="/user/orderView/all" path="all" className="tit box border_b1">
                <h3>我的订单</h3>
                <small>查看全部订单<img src={arr_right} className="arr_right" /></small>
              </NavLink>
              <div className="nav box border_b1">
                <div className="wrapper">
                  <NavLink to="/user/orderView/pending" path="pending">
                    <ImageLazy src={user_nav1} style={{width:'.56rem'}} /><br/>
                    待付款
                  </NavLink>
                  <NavLink to="/user/orderView/unconsumed">
                    <ImageLazy src={user_nav2} style={{width:'.5rem'}} /><br/>
                    未消费
                  </NavLink>
                  <NavLink to="/user/orderView/consumed">
                    <ImageLazy src={user_nav3} style={{width:'.54rem'}} /><br/>
                    已消费
                  </NavLink>
                  <NavLink to="/user/orderView/refund">
                    <ImageLazy src={user_nav4} style={{width:'.56rem'}} /><br/>
                    退款
                  </NavLink>
                </div>
              </div>
            </div>
            <div classNmae="item">
              <NavLink to="/about" className="tit box border_b1">
                <h3>关于美人谷</h3>
                <small><img src={arr_right} className="arr_right" /></small>
              </NavLink>
            </div>
            <div classNmae="item">
              <NavLink to="/user/problems" className="tit box border_b1">
                <h3>常见问题</h3>
                <small><img src={arr_right} className="arr_right" /></small>
              </NavLink>
            </div>
            <div classNmae="item">
              <a href="tel:400-886-8382" className="tit box border_b1">
                <h3>客服电话</h3>
                <small>400-886-8382<img src={arr_right} className="arr_right" /></small>
              </a>
            </div>
          </div>
          <div className="setting">
            <div className="bot">
              <a href="javascript:void(0)" onClick={this.confim_out}>退出登录</a>
            </div>
          </div>
        </div>
      </div>
    )
  }
})

const mapStateToProps = (state) => {
  let user_logined = !!state.user.user_logined || false;
  return {
    user_logined:user_logined,
    userTel:state.user.userTel,
    userId:state.user.userId
  }
}

export default connect(mapStateToProps)(mydefault)
